<template>
  <div class="app-container">

    <el-container>

      <el-aside>
        <span>组织机构</span>
        <el-divider class="divider" />
        <el-tree
          :data="treeData"
          accordion
          default-expand-all
        />
      </el-aside>

      <el-main>

        <el-row class="search-condition">

          <el-form :inline="true">

            <el-form-item>
              <el-input v-model="condition.value" placeholder="请输入内容" class="input-with-select">
                <el-select slot="prepend" v-model="condition.key" placeholder="请选择" style="width:100px">
                  <el-option
                    v-for="item in conditionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-input>

            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="getUserList">查询</el-button>
            </el-form-item>

            <el-form-item>
              <el-button type="text" icon="el-icon-refresh-left" @click="clearCondition">重置</el-button>
            </el-form-item>

          </el-form>
        </el-row>

        <data-grid
          :custom-data-grid="customAttendDataGrid"
          @page-change="pageChange"
        />
      </el-main>
    </el-container>

    <el-dialog :visible.sync="dialogVisible" :title="textMap[dialogStatus]" width="40%">
      <el-form ref="userForm" :model="userForm" :rules="userFormRules" label-width="70px">

        <el-row>
          <el-col :span="12"><el-form-item prop="account" label="账号" placeholder="请输入账号"> <el-input v-model="userForm.account" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item prop="name" label="姓名" placeholder="请输入姓名"> <el-input v-model="userForm.name" /></el-form-item></el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item prop="gender" label="性别">
              <el-select v-model="userForm.gender" class="filter-item" placeholder="Please select">
                <el-option :key="0" label="保密" :value="0" />
                <el-option :key="1" label="男" :value="1" />
                <el-option :key="2" label="女" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="enable" label="状态">
              <el-select v-model="userForm.enable" class="filter-item" placeholder="Please select">
                <el-option key="true" label="启用" value="true" />
                <el-option key="false" label="禁用" value="false" />
              </el-select>
            </el-form-item>

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12"><el-form-item label="岗位" prop="position">

            <!-- <el-input v-model="userForm.position" /> -->

            <tree-select
              :height="200"
              :data="positionTreeData"
              :default-props="defaultProps"
              check-strictly
              @popoverHide="positionTreeClick"
            />

          </el-form-item></el-col>
          <el-col :span="12">
            <el-form-item label="角色" prop="role">
              <el-drag-select v-model="userForm.role" multiple placeholder="请选择">
                <el-option v-for="item in roleData" :key="item.id" :label="item.name" :value="item.id" />
              </el-drag-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12"><el-form-item label="部门" prop="department" placeholder="请输入姓名">

            <tree-select
              :height="200"
              :data="departmentData"
              :default-props="defaultProps"
              check-strictly
              :checked-keys="userForm.department"
              @popoverHide="departmentTreeClick"
            />

          </el-form-item></el-col>
          <el-col :span="12"><el-form-item label="手机" placeholder="请输入手机号码"> <el-input v-model="userForm.phone" /></el-form-item></el-col>
        </el-row>

        <el-row>
          <el-col :span="12"><el-form-item label="电子邮箱" placeholder="请输入姓名"> <el-input v-model="userForm.email" /></el-form-item></el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="描述">
              <el-input v-model="userForm.description" autocomplete="off" rows="6" type="textarea" placeholder="请输入描述" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogStatus==='add'?createUser():updateUser()">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import DataGrid from '@/components/DataGrid/index'
import TreeSelect from '@/components/TreeSelect/index'
import userManage from '@/api/sytsem-permission'
import ElDragSelect from '@/components/DragSelect' // base on element-ui

export default {
  name: 'ComplexTable',
  components: { DataGrid, TreeSelect, ElDragSelect },
  data() {
    return {
      userForm: {
        account: '',
        name: '',
        email: '',
        gender: 0,
        enable: 'true',
        department: [],
        role: '',
        phone: '',
        position: '',
        description: ''
      },
      userFormRules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { max: 15, message: '最大长度15个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { max: 15, message: '最大长度15个字符', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        enable: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        department: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        role: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ],
        position: [
          { required: true, message: '请选择岗位', trigger: 'change' }
        ]
      },

      customAttendDataGrid: {
        list: [],
        table: {
          tableMaxHeight: 'unset',
          tableWidth: '100%',
          marginTop: 24,
          border: true,
          showPagination: true,
          showOperation: true,
          showHeader: true,
          indexWidth: 10,
          showIndex: true,
          fontSize: 16,
          cellBtn: {
            fontColor: '#ffffff'
          },
          headerCellStyle: {
            backgroundColor: '#e9f8ff',
            color: '#333333',
            fontSize: '16px'
          },
          cellStyle: {
            fontSize: '20px'
          }
        },
        page: {
          layout: 'sizes, prev, pager, next',
          pageSizes: [10, 20, 50, 100, 200],
          total: 1,
          currentPage: 1
        },
        columns: [
          { label: '姓名', align: 'center', prop: 'name' },
          { label: '账号', align: 'center', prop: 'account' },
          { label: '手机', align: 'center', prop: 'phone' },
          { label: '性别', align: 'center', prop: 'genderStr' },
          { label: '状态', align: 'center', prop: 'enable' }
        ],
        topButtons: [
          { name: '新增', type: 'primary', icon: 'el-icon-plus', plain: true, click: () => { this.dialogOpen('add') } }
        ],
        rowButtons: [
          { name: '修改', icon: 'el-icon-edit', click: (row) => {
            this.dialogOpen('update')
            this.userForm = JSON.parse(JSON.stringify(row))
            console.log(row)
          } },
          { name: '删除', icon: 'el-icon-delete', click: (row) => { this.deleteUser(row.id) } }
        ]
      },

      conditionData: [
        { label: '姓名', value: 'name' },
        { label: '账号', value: 'account' },
        { label: '手机', value: 'phone' }
      ],
      condition: {
        key: 'name',
        value: '',

        page: 1,
        size: 20
      },
      dialogVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        add: '新增'
      },
      treeData: [],
      roleData: [],
      departmentData: [],
      positionTreeData: [],
      defaultCheckedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.defaultCheckedKeys = [1000];
    this.getUserList();
    this.getDepartmentTree();
    this.findRoleListAll();
    this.findPositionTree();
  },
  methods: {
    departmentTreeClick: function(selectData) {
      this.userForm.department = selectData
    },
    positionTreeClick: function(selectData) {
      this.userForm.position = selectData
    },
    findPositionTree: function() {
      userManage.findPositionTree().then(data => {
        this.positionTreeData = data;
      })
    },

    findRoleListAll: function() {
      userManage.findRoleListAll().then(data => {
        this.roleData = data
      })
    },

    getDepartmentTree: function() {
      userManage.findDepartmentTree().then(data => {
        this.departmentData = data;
        this.treeData = data;
      })
    },
    clearCondition: function() {
      this.condition.key = 'name'
      this.condition.value = ''
    },
    dialogOpen: function(type) {
      this.dialogVisible = true
      this.dialogStatus = type
      if (type === 'add') {
        // this.userForm = this.userFormInit;
      }
    },
    deleteUser: function(id) {
      userManage.deleteUser(id).then(data => {
        this.getUserList()
        this.dialogVisible = false
      })
    },
    updateUser: function() {
      userManage.saveUser(this.userForm).then(data => {
        this.getUserList()
        this.dialogVisible = false
      })
    },
    createUser: function() {
      userManage.saveUser(this.userForm).then(data => {
        this.getUserList()
        this.dialogVisible = false
      })
    },
    getUserList: function() {
      userManage.pageUser(this.condition).then(data => {
        this.customAttendDataGrid.list = data.content
        this.customAttendDataGrid.page.total = data.numberOfElements
        this.customAttendDataGrid.page.pageSize = data.size
        this.customAttendDataGrid.page.currentPage = data.number + 1
      })
    }
  }
}
</script>

<style>
.divider{
  margin: 10px 0 !important;
}
</style>
